<template>
  <div class="symptom-template">
    <h4 class="template-title">症状描述模板</h4>
    <el-select
      v-model="selectedTemplate"
      placeholder="选择症状模板"
      @change="handleTemplateChange"
      class="template-select"
    >
      <el-option
        v-for="template in symptomTemplates"
        :key="template.id"
        :label="template.name"
        :value="template.id"
      />
    </el-select>
    
    <div v-if="selectedTemplateData" class="template-content">
      <p class="template-description">{{ selectedTemplateData.description }}</p>
      <el-button
        size="small"
        type="primary"
        @click="useTemplate"
        class="use-template-btn"
      >
        使用此模板
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['useTemplate'])

const selectedTemplate = ref('')

const symptomTemplates = [
  {
    id: 'headache',
    name: '头痛症状',
    description: '我最近出现头痛症状，疼痛部位在[前额/后脑/太阳穴]，疼痛性质为[胀痛/刺痛/跳痛]，持续时间约[几小时/几天]，伴随症状有[恶心/眩晕/视力模糊等]。'
  },
  {
    id: 'fever',
    name: '发热症状',
    description: '我出现发热症状，体温最高达到[具体温度]℃，持续时间[几小时/几天]，伴随症状有[咳嗽/咽痛/乏力/肌肉酸痛等]，是否服用过退热药物[是/否]。'
  },
  {
    id: 'cough',
    name: '咳嗽症状',
    description: '我出现咳嗽症状，咳嗽性质为[干咳/有痰]，痰液颜色[白色/黄色/绿色]，咳嗽时间多在[白天/夜间/全天]，持续时间约[几天/几周]。'
  },
  {
    id: 'stomach',
    name: '胃部不适',
    description: '我出现胃部不适，症状表现为[胃痛/胃胀/恶心/呕吐]，疼痛部位在[上腹部/剑突下]，与进食的关系[饭前痛/饭后痛/无关]，持续时间[几小时/几天]。'
  },
  {
    id: 'chest',
    name: '胸部症状',
    description: '我出现胸部症状，表现为[胸痛/胸闷/心悸]，疼痛部位在[左胸/右胸/胸骨后]，疼痛性质[刺痛/压迫感/烧灼感]，是否与活动有关[是/否]。'
  }
]

const selectedTemplateData = computed(() => {
  return symptomTemplates.find(template => template.id === selectedTemplate.value)
})

const handleTemplateChange = () => {
  // 模板选择变化时的处理
}

const useTemplate = () => {
  if (selectedTemplateData.value) {
    emit('useTemplate', selectedTemplateData.value.description)
  }
}
</script>

<style scoped>
.symptom-template {
  margin-bottom: 15px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  backdrop-filter: blur(5px);
}

.template-title {
  margin: 0 0 10px 0;
  color: #4CAF50;
  font-size: 14px;
  font-weight: 600;
}

.template-select {
  width: 100%;
  margin-bottom: 10px;
}

.template-content {
  margin-top: 10px;
  padding: 10px;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 4px;
  border-left: 3px solid #4CAF50;
}

.template-description {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
}

.use-template-btn {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

@media (max-width: 768px) {
  .template-description {
    font-size: 12px;
  }
}
</style>